{%  set isNav = true %}
{% extends './layout/layout.html' %}

{#  引入宏  #}
{% import './macros/blog-list.html' as list %}
{% import './macros/loadMore.html' as loadBtn %}
{% import './macros/user-info.html' as user %}
{% import './macros/fans.html' as fans %}
{% import './macros/follower.html' as follower %}

{% block headCss %}
<link rel="stylesheet" href="/css/profile.css">
{% endblock %}
{% block content %}
<div class="container">
  <div class="row">
    <div class="col-lg-8 col-sm-8">
      <h2>我的空间</h2>
      <div class="item-wrapper">
        {% if blogList.length > 0 %}
        {{ list.list(blogList, isCanReply = true) }}
        {% else %}
        <p>暂无数据</p>
        {% endif %}
      </div>
      {{ loadBtn.loadMore(
      pageIndex,
      pageSize,
      count,
      api = '/api/blog/loadProfileMore/'+userData.userInfo.userName + "/"
    ) }}
    </div>

    <!-- 右侧内容 -->
    <div class="col-lg-4 col-sm-4">
      <!-- 个人信息 -->
      {{ user.userInfo(
        user = userData.userInfo,
        isMe = userData.isMe,
        isMeFollow = userData.isMeFollow,
        atCount = userData.atCount
      ) }}
      <hr>
      <!-- 关注列表 -->
      {{ follower.showFollower(
        count = userData.followData.count,
        userList = userData.followData.followList
      ) }}
      <hr>
      <!-- 粉丝列表 -->
      {{ fans.showFans(
        count = userData.fansData.count,
        userList = userData.fansData.fansList
      ) }}
    </div>
  </div>
</div>


{% endblock %}

{% block js %}
{#
<script>
  const pageIndex = parseInt($(".btn-load-more").data('page-index')); // 页面加载时获取当前页面
  const pageSize = parseInt('{{pageSize}}');// 页面加载时获取每页显示博客的数量
  const count = parseInt($(".btn-load-more").data('count'));//博客总量

  if (pageSize * pageIndex >= count) {
    $(".btn-load-more").hide();
  }

  $(".btn-load-more").click(function () {
    const pageIndex = $(this).data('page-index');
    const userName = '{{userData.userInfo.userName}}';
    var nextPageIndex = PAGE_INDEX + 1
    ajax.get(`/api/blog/loadProfileMore/${userName}/${pageIndex}`, function (err, res) {
      if (err) {
        alert(err)
      }

      // 渲染dom
      res.blogList.forEach(item => {

        let $image = "";
        if (item.image) {
          $image = `
            <a href="${item.image}" target="_blank">
              <img src="${item.image}" alt="" width="150" class="blog-image">
            </a>`
        }

        const $loadMoreTemplate = `<div class="blog-item">
          <div class="user-info">
            <img src="${item.user.avatar}" alt="" class="user-avatar" width="50" height="50" style=" border-radius: 50%; ">
          </div>
          <div class="blog-info">
            <div class="blog-content">
              <div>
                <a href="###"><span class="username">${item.user.nickName}：</span></a>
                <span class="text">${item.content}</span>
              </div>
              ${$image}
            </div>
            <div class="create-time">
              <p>${item.createdAt}</p>
            </div>
          </div>
          <hr>
        </div>
        <hr>`
        $('.item-wrapper').append($loadMoreTemplate)
      })

      // 如果显示的数量=博客总量，隐藏按钮
      if (pageSize * (pageIndex + 1) >= count) {
        $(".btn-load-more").hide();
      }
    })
  })
</script>
#}
{% endblock %}